<script>
import {
  defineComponent,
  reactive,
  toRefs
} from 'vue'

export default defineComponent({
  name: 'ConfigItem',
  props: {
    title: {
      type: String,
      default: ''
    },
    hasTitle: {
      type: Boolean,
      default: true
    },
    titleSize: {
      type: String,
      default: '148px'
    }
  },
  setup() {
    const state = reactive({})

    return {
      ...toRefs(state)
    }
  }
})
</script>

<template>
  <div class="component-config-item-container">
    <div class="config-label" :style="{ width: titleSize }">
      <span v-if="hasTitle">{{ title }}</span>
      <slot name="title" />
    </div>
    <div class="config-slot" :style="{ width: `calc(100% - ${titleSize})` }">
      <slot />
    </div>
  </div>
</template>

<style lang="scss">
.component-config-item-container {
  min-height: 36px;
  display: flex;
  align-items: center;
  margin-bottom: 12px;

  &:last-child {
    margin-bottom: 0;
  }
}
</style>
